import React, { Component } from "react";
import { connect } from "react-redux";
import { Drawer, Switch, Row, Col, Divider, Alert, Button } from "antd";
import { toggleSettingPanel, changeSetting } from "@/store/actions";
import {SettingOutlined , CloseOutlined} from "@ant-design/icons";
import clip from "@/utils/clipboard";
import './index.less';
class RightPanel extends Component {
  state = {
    sidebarLogo: true,
    fixedHeader: true,
  };
  sidebarLogoChange = (checked) => {
    this.setState({ sidebarLogo: checked });
    this.props.changeSetting({ key: "sidebarLogo", value: checked });
  };
  fixedHeaderChange = (checked) => {
    this.setState({ fixedHeader: checked });
    this.props.changeSetting({ key: "fixedHeader", value: checked });
  };
  handleCopy = (e) => {
    let config = `
    export default {
      showSettings: true,
      sidebarLogo: ${this.state.sidebarLogo},
      fixedHeader: ${this.state.fixedHeader},
    }
    `;
    clip(config, e);
  };
  getContainer = () => {
      return this.container;
  }
  saveContainer = container => {
      this.container = container;
  }
  render() {
    const {
      settingPanelVisible,
      toggleSettingPanel,
      sidebarLogo,
      fixedHeader,
    } = this.props;
	
	/* <div className={['rightSettings',settingPanelVisible?"active":''].join('')} ref={this.saveContainer}>
			<div className="setting-drawer-handle" onClick={toggleSettingPanel}><CloseOutlined/></div>
	  <Drawer
	    title="系统设置"
	    placement="right"
	    width={350}
	    onClose={toggleSettingPanel}
	    visible={settingPanelVisible}
			  getContainer={this.getContainer}
			  drawerStyle={{ position: 'absolute' }}
	  >
	    <Row>
	      <Col span={12}>
	        <span>侧边栏 Logo</span>
	      </Col>
	      <Col span={12}>
	        <Switch
	          checkedChildren="开"
	          unCheckedChildren="关"
	          defaultChecked={sidebarLogo}
	          onChange={this.sidebarLogoChange}
	        />
	      </Col>
	    </Row>
	    <Divider dashed />
	    <Row>
	      <Col span={12}>
	        <span>固定 Header</span>
	      </Col>
	      <Col span={12}>
	        <Switch
	          checkedChildren="开"
	          unCheckedChildren="关"
	          defaultChecked={fixedHeader}
	          onChange={this.fixedHeaderChange}
	        />
	      </Col>
	    </Row>
	    <Divider dashed />
	    <Row>
	      <Col span={24}>
	        <Alert
	          message="开发者请注意:"
	          description="配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改/src/defaultSettings.js配置文件"
	          type="warning"
	          showIcon
	          icon={<Icon type="notification" />}
	          style={{ marginBottom: "16px" }}
	        />
	        <Button
	          style={{ width: "100%" }}
	          icon="copy"
	          onClick={(e) => {
	            this.handleCopy(e);
	          }}
	        >
	          拷贝配置
	        </Button>
	      </Col>
	    </Row>
			  
	  </Drawer>
			{ settingPanelVisible ? <div className="setting-drawer-index-handle" onClick={toggleSettingPanel}><CloseOutlined/></div> : null}
	</div> */
    return (
		<div className="setting-drawer" ref={this.saveContainer}>
			<div className="setting-drawer-index-handles" onClick={toggleSettingPanel}><SettingOutlined /></div>
		    <Drawer width={300} visible={settingPanelVisible} onClose={toggleSettingPanel} closable={false} placement="right" getContainer={this.getContainer}  drawerStyle={{ position: 'absolute' }}>
		        <div className="setting-drawer-index-content">
		            <Row>
		              <Col span={12}>
		                <span>侧边栏 Logo</span>
		              </Col>
		              <Col span={12}>
		                <Switch
		                  checkedChildren="开"
		                  unCheckedChildren="关"
		                  defaultChecked={sidebarLogo}
		                  onChange={this.sidebarLogoChange}
		                />
		              </Col>
		            </Row>
		            <Divider dashed />
		            <Row>
		              <Col span={12}>
		                <span>固定 Header</span>
		              </Col>
		              <Col span={12}>
		                <Switch
		                  checkedChildren="开"
		                  unCheckedChildren="关"
		                  defaultChecked={fixedHeader}
		                  onChange={this.fixedHeaderChange}
		                />
		              </Col>
		            </Row>
		            <Divider dashed />
		            <Row>
		              <Col span={24}>
		                <Alert
		                  message="开发者请注意:"
		                  description="配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改/src/defaultSettings.js配置文件"
		                  type="warning"
		                  style={{ marginBottom: "16px" }}
		                />
		                <Button block onClick={(e) => {
		                    this.handleCopy(e);
		                  }}
		                >
		                  拷贝配置
		                </Button>
		              </Col>
		            </Row>
		        </div>
		        { settingPanelVisible ? <div className="setting-drawer-index-handle" onClick={toggleSettingPanel}><CloseOutlined/></div> : null}
		    </Drawer>
		</div>
      
    );
  }
}

const mapStateToProps = (state) => {
  return {
    ...state.app,
    ...state.settings,
  };
};

export default connect(mapStateToProps, { toggleSettingPanel, changeSetting })(
  RightPanel
);
